import React, { Component } from 'react'
import './index.css'

/**
 * 本小节主要讲的是利用Context进行祖孙组件之间的值传递
 * 我们知道，使用props属性自然可以将方法或者数据从父组件上逐层传递到子组件中
 * 但是当组件间的嵌套关系比较深的时候，这时再通过props来传递值就会很麻烦，针对这种情况，
 * 我们可以考虑用Context来解决这个问题：Context其实是组件实例对象上的一个属性，利用Provider和Consumer
 * 我们可以实现值的传递
 */

const MyContext = React.createContext();
const { Provider, Consumer } = MyContext;
export default class A extends Component {

    state = { name: '小明', age: 18 }

    render() {
        const {name,age} = this.state;
        return (
            <div className="parent">
                我是A组件
                <br />
                <h4>姓名是：{this.state.name},年龄是：{this.state.age}</h4>
                {/* 使用Provider包裹住子组件，有需要的后代组件通过Consumer标签即可获取,需要注意，value传入的值是一个对象 */}
                <Provider value={{name,age}}>
                    <B />
                </Provider>
            </div>
        )
    }
}

class B extends Component {
    render() {
        return (
            <div className="child">
                我是B组件
                <C />
            </div>
        )
    }
}

class C extends Component {
    render() {
        return (
            <div className="grand">
                我是C组件
                <h4>
                    从A组件获取到的值为
                    <Consumer>
                        {value => `姓名为：${value.name},年龄为：${value.age}`}
                    </Consumer>
                </h4>
            </div>
        )
    }
}


